<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<script src="${ctxWebStatic}/laydate/laydate.js"></script>

<jsp:include page="/WEB-INF/views/layouts/head.jsp"></jsp:include>
<head>
<title>找回密码</title>
<style type="text/css">
em.error {
	height: 18px;
	display: inline-block;
	vertical-align: middle;
	margin-right: 2px;
	margin-left: 20px;
	background: url("${ctxWebStatic}/images/error_img.png") no-repeat 0px
		0px;
	padding-left: 24px;
	color: #d3001e;
	font-size: 16px;
	font-family: "微软雅黑";
}
</style>
<script type="text/javascript">
	var subflag = false;
	
	$(document).ready(function() {
		$("#form").validate({
			rules : {
				mobile : {
					required : true,
					phoneCheck : true,
					rangelength:[11,11],
					remote : {
						type : "POST",
						url : "${ctxWeb}/register/checkMobileExist", 
						cache:false,
			            async:false,
						data : {
							mobile : function() {
								return $("#mobile").val();
							}
						}
					}
				}
			},
			messages : {
				mobile : {
					required : '请输入手机号码',
					rangelength : '手机号码格式错误',
					remote : '手机号不存在'
				}
			},
			errorElement : "em",
		});
		jQuery.validator.addMethod("phoneCheck", function(value,element, param) { 
	    	var tel = /^[1][3,4,5,7,8][0-9]{9}$/;  
		 	return this.optional(element) || (tel.test(value));  
        }, $.validator.format("手机号码格式错误")); 
	})
	
	function sub() {
		if(subflag){
			return;
		}
		var checkFlag = true;
		//单独验证验证码
		if ($("#smsCode").val() == "") {
			$("#smsCodeErrTips").css("display", "inline");
			$("#smsCodeErrTips > span").html("请输入验证码");
			checkFlag = false;
		}
		//ajax校验验证码
		$.ajax({
			data : {
				"mobile" : $("#mobile").val(),
				"code" : $("#smsCode").val()
			},
			type : "post",
			async : false,
			url : "${ctxWeb}/sms/checkCode",
			dataType : "json",
			success : function(data) {
				if (data.resultCode == "0") {
					checkFlag = false;
					$("#smsCodeErrTips").css("display", "inline");
					$("#smsCodeErrTips > span").html(data.resultMessage);
				}
			},
			error : function(data) {
				alert("网络异常");
				checkFlag = false;
			}
		})

		if (!$("#form").valid()) {
			checkFlag = false;
		}

		if (!checkFlag) {
			return false;
		}
		$("#smsCodeErrTips").css("display", "none");
		$("form").submit();
		subflag = true;
	}
	
	//验证码
	var clock = '';
	var resetTime = 60;
	var nums = 60;
	var btn;
	
	function getSmsCode(thisBtn) {
		if (!$("#form").validate().element("#mobile")) {
			return;
		}
		btn = thisBtn;
		btn.disabled = true; //将按钮置为不可点击 
		$.ajax({
			data : {
				"mobile" : $("#mobile").val()
			},
			type : "post",
			url : "${ctxWeb}/sms/getCode",
			dataType : "json",
			success : function(data) {
				$('#smsCodeErrTips').hide();
				$(btn).removeClass("bg_red_btn");
				$(btn).addClass("bg_gry");
				$(btn).html(nums + '秒后可重新获取');
				clock = setInterval(doLoop, 1000); //一秒执行一次
			},
			error : function(data) {
				btn.disabled = false; 
				alert("网络异常");
			}
		})
	}
	
	function doLoop() {
		nums--;
		if (nums > 0) {
			$(btn).html(nums + '秒后可重新获取');
		} else {
			clearInterval(clock); //清除js定时器
			$(btn).removeClass("bg_gry");
			$(btn).addClass("bg_red_btn");
			$(btn).html('获取验证码');
			btn.disabled = false;
			nums = resetTime; //重置时间
		}
	}
	//验证码#
</script>
</head>
<body>
	<div class="page">
		<jsp:include page="/WEB-INF/views/layouts/top_findPassword.jsp"></jsp:include>
		<!--主体-->
		<div class="main_user_resigt">
			<div class="container">
				<div class="row">
					<div class="step_password clearfix">
						<figure class="step_item">
							<p class="num">1</p>
							<h4>验证手机号码</h4>
						</figure>
						<figure class="step_item step_on">
							<p class="num">2</p>
							<h4>设置新密码</h4>
						</figure>
						<figure class="step_item step_on">
							<p class="num">3</p>
							<h4>设置成功</h4>
						</figure>
					</div>
					<form id="form" action="${ctxWeb}/password/toReset" method="post">
						<div class="form-group clearfix">
							<label for="firstname"
								class="col-sm-3 col-xs-4 input_info control-label"> <i
								class="must_img"></i>手机号码：
							</label>
							<div class="col-sm-9 col-xs-8 input_left">
								<input type="tel" id="mobile" name="mobile" class="form-control" placeholder="建议使用常用手机号码">
							</div>
						</div>
						<div class="form-group Code_form clearfix">
							<label for="firstname"
								class="col-sm-3 col-xs-4 input_info control-label"> <i
								class="must_img"></i>验证码：
							</label>
							<div class="col-sm-9 col-xs-8 input_left">
								<input type="text" name="smsCode" id="smsCode"  maxlength="6" class="form-control" placeholder="请输入手机验证码">
								<button class="get_code bg_red_btn" type="button" onclick="getSmsCode(this)" >获取验证码</button>
								<div class="error_tips" style="display: none;"
									id="smsCodeErrTips">
									<i class="error_img"></i> <span>输入有误</span>
								</div>
							</div>
						</div>
					</form>
					<p class="register_btn next_step col-sm-offset-3 col-xs-offset-4">
						<a href="javascript:void(0)" onclick="sub()">下一步</a>
					</p>

				</div>
			</div>
		</div>
		<!--主体结束-->
		<!--foot-->
		<jsp:include page="/WEB-INF/views/layouts/buttom_2.jsp"></jsp:include>
		<!--foot结束-->
	</div>
</body>
</html>
